<template>
  <div class="about">
    <div>
      <Slot class="slot_list">
        <div @click="onClickReturn"><van-icon name="arrow-left" /></div>
        <div>砍价列表</div>
        <div></div>
      </Slot>
    </div>
    <div v-for="(item,index) in list.slice(8,19)" :key="index" class="content_wrapper1" 
    @click="onClickContent(item)">
          <div class="content_wrapper_img">
            <img :src="item.pic" alt="" class="content_img">
          </div>
          <div class="content_wrapper_tent">
            <div style="font-size:16px;height:50px;display:flex;justify-content:flex-start;align-items: center;" v-html="item.name"></div>
            <div class="characteristic" v-html="item.characteristic"></div>
            <div class="content_wrapper_tent_wrapper">
              <div>
                <div>{{item.minPrice | Price}}</div>
                <div>低价</div>
              </div>
              <div>
                <div>{{item.originalPrice | Price}}</div>
                <div>原价</div>
              </div>
              <div>
                <div>{{item.stores | stores}}</div>
                <div>限量</div>
              </div>
            </div>
          </div>
        </div>
          
  </div>
</template>

<script>
import Slot from "../components/slot/slot";
export default {
  data(){
    return{
      list:JSON.parse(localStorage.getItem("list")) || [],
    }
  },
  methods:{
    onClickReturn(){
      this.$router.go(-1)
    },
    onClickContent(item){
      // localStorage.setItem('listys',JSON.stringify(item))
      console.log(item);
      this.$router.push({
        path:this.$myRouter.PathConfig.LISTYS,
        query:{
          id:item.id
        }
      })
    }
  },
  mounted(){
    console.log(this.list);
  },
   filters:{
    Price:function(val){
      return '￥' + val
    },
    stores:function(val){
      return val + "件"
    }
  },
  components:{
    Slot
  }
}
</script>

<style>
#renqi p img
{
  /* width: 100%; */
  width: 360px;
}
.img-lazyload img
{
  width: 100%;
}
  .content_wrapper1
{
  width: 100%;
  height: 50%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 50px;
}
.content_wrapper_img
{
  width: 30%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.content_img
{
  width: 100%;
}
.content_wrapper_tent
{
  width: 70%;
  height: 100%;
}
.content_wrapper_tent_wrapper
{
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-size: 14px;
}
.characteristic
{
  width: 100%;
  font-size:14px;
  height:50px;
  display: flex;
  justify-content: flex-start;  
  align-items: center;
}
.slot_list
{
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-size: 16px;
  border-bottom: 1px solid black;
  position: fixed;
  top: 0;
  left: 0;
  background: white;
}
</style>